<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    Hello iframe!
</div>
<script>
    // 访问当前window对象以及父级window对象的方法
    /*window:当前window对象 */
    /*window.parent:当前window对象的父级window */
    /*window.top:最顶层window对象 */

    // 注意：脚本访问框架内容必须遵守同源策略，并且无法访问非同源的 window 对象的几乎所有属性。
    // 同源策略同样适用于子窗体访问父窗体的 window 对象。跨域通信可以通过 window.postMessage 来实现。
    // console.log(window,window.parent,window.top)
    window.onload = function () {
        // 跨域通信可以通过 hash 或者 window.postMessage 来实现。
        // 但通过URl中的hash方法适用于父级窗体向子窗体发送数据
        // 如父窗体通过了改变iframe的src中hash数据，我们可以监听onhashchange，来获取数据
        window.onhashchange = function () {
            console.log('父窗体改变了子窗体的hash：', window.location.hash)
        }

        // 第一个参数是data，第二个是目标窗口地址
        // 目标地址可以是字符串"*"（表示无限制）或者一个URI。
        // 在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；
        // 只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口，可以防止XSS攻击
        window.postMessage('LiJiaCheng', 'http://localhost:63342/front-end-basics/src/iframe/index.html');
    }
</script>
</body>
</html>